import React, { Component } from 'react';
import PropTypes from 'prop-types';
import SettingStyle from '@/page/setting/setting.scss';
import { Input, message, Spin } from 'antd';
import UserStore from '@/store/User';
import MModal from '@/component/common/MModal';
import ApiHelper from '@/store/ApiHelper';
import { send_update_psw_sms, check_update_psw_sms } from "@/constants/ApiTypes";

class AuthenticationCode extends Component {
    constructor(props) {
        super(props);
    }
    state = {
        code: '',
        spinning: false,
        buttonText: '获取短信验证码',
        timerLength: 60,
        flag: false
    };
    componentDidMount() {
        this._isMounted = true;
    }
    handleSubmit = async () => {
        const { code } = this.state;
        if ( code == '' ) {
            return message.warn('请填写短信验证码', 1.5);
        }
        //验证验证码
        this._setState({ spinning: true });
        const data = { mobile: UserStore.info.mobile, verify: code };
        const result  = await ApiHelper.requestPost(check_update_psw_sms, data);
        this._setState({ spinning: false });
        if (result.status) {
            this.props.confirmCodePass();
        } else {
            return MModal.success({ title: '错误提示', content: result.info });
        }
    };
    handleClick = async () => {
        if (!this.state.flag) {
            //验证码发送
            this._setState({ spinning: true });
            const data = { mobile: UserStore.info.mobile };
            const result = await ApiHelper.requestPost(send_update_psw_sms, data);
            this._setState({ spinning: false });
            if (result.status) {
                MModal.success({ title: '提示', content: '验证码已发送~', duration: 1.5 });
            } else {
                return MModal.success({ title: '错误提示', content: result.info });
            }
            this._setState({
                flag: true
            });
            this.timer = setInterval(() => {
                let length = this.state.timerLength;
                if ( length > 1 ) {
                    length--;
                    this._setState({
                        timerLength: length
                    });
                    this._setState({
                        buttonText: length + '秒后重新发送'
                    });
                } else {
                    this._setState({
                        buttonText: '获取短信验证码',
                        timerLength: 60,
                        flag: false
                    });
                    clearInterval(this.timer);
                }
            }, 1000)
        }
    };
    componentWillUnmount() {
        this._isMounted = false;
        clearInterval(this.timer);
    }
    codeOnChange = e => {
        let value = e.target.value;
        //只能输入数字
        value = value.replace(/^\./g, "");
        value = value.replace(/\.{2,}/g, ".");
        if (value.length > 6) {
            value = value.substr(0, 6);
        }
        this.setState({ code: value });
    };
    //fix异步
    _setState = state => {
        if (this._isMounted) this.setState(state);
    };
    static propTypes = {
        columns: PropTypes.array,
        dataSource: PropTypes.array
    };
    render() {
        return (
            <Spin tip="loading" spinning={this.state.spinning} delay={150}>
                <table border="0" className={SettingStyle['phone-submit']}>
                    <thead />
                    <tbody>
                        <tr>
                            <td style={{ textAlign: 'right', paddingRight: '6px' }}>手机号码:</td>
                            <td>{UserStore.info.mobile}</td>
                            <td><span> </span></td>
                        </tr>
                        <tr>
                            <td style={{ textAlign: 'right', paddingRight: '6px' }}>验证码:</td>
                            <td><Input placeholder="短信验证码" onChange={this.codeOnChange} value={this.state.code} /></td>
                            <td><a className={SettingStyle['text-button']} onClick={ this.handleClick }>{ this.state.buttonText }</a></td>
                        </tr>
                        <tr>
                            <td><span> </span></td>
                            <td className={SettingStyle['confirm']}>
                                <a href="javascript:void(0);" className={SettingStyle['confirm-btn']} onClick={this.handleSubmit}>确认</a></td>
                            <td><span> </span></td>
                        </tr>
                    </tbody>
                </table>
            </Spin>
        );
    }
}
AuthenticationCode.propTypes = {
    confirmCodePass: PropTypes.func
};
export default AuthenticationCode;